<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-if="!isShowSet">
      <div class="workmanship_tit">
        <span><i></i>{{ form.title }}</span>
      </div>
      <div class="workmanship_con">
        <div class="chartBox clearfix">
          <div class="chartBox_l">
            <div id="pie" style="width: 100%; height: 100%"></div>
          </div>
          <div class="chartBox_r">
            <p class="p1">出勤率</p>
            <p class="p2">{{ form.attendance }}%</p>
          </div>
        </div>
        <el-carousel style="height: 40%;overflow: hidden" indicator-position="none" arrow="never">
          <el-carousel-item v-for="(item,index) in dataList" :key="index">

            <div class="synopsis">
              <ul class="synopsis_l clearfix">
                <li>姓名：{{ item.name }}</li>
                <li>岗位：{{ item.position }}</li>
                <li>工龄：{{ item.age }}年</li>
                <li>功效：{{ item.gongxiao }}</li>
              </ul>
              <div class="synopsis_r">
                <img :src="item.picURL">
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

      </div>
    </div>
    <div class="workmanship editBox" v-else>
      <span @click="dialogVisible = true">编辑</span>
    </div>

    <el-dialog title="栏目设置"
               v-loading="!loadingMessage&&loading"
               :close-on-click-modal="false"
               custom-class="team-dialog" :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="editFrom" label-width="120px" v-loading="loadingMessage&&loading"
               :element-loading-text="loadingMessage">
        <el-form-item label="栏目标题：">
          <el-input v-model="editFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <el-form-item label="出勤率：">
          <el-input-number v-model="editFrom.attendance" controls-position="right" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <!-- 固定值 -->
        <div>
          <el-form-item label="数据设置：">
            <div
                class="mb10 worker-list"
                v-for="(item, index) in editFrom.datalist"
                :key="index"
            >
              <el-upload
                  :data="{index}"
                  action="#"
                  list-type="picture-card"
                  :http-request="uploadDetailImg"
                  :before-upload="beforeImgUpload"
                  :show-file-list="false"
                  :multiple="false"
              >
                <img v-if="item.picURL" :src="item.picURL" style="width: 100%;object-fit: cover">
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <el-input v-model="item.name" class="inputDiv" placeholder="请输入姓名"></el-input>
              <el-input v-model="item.position" class="inputDiv" placeholder="请输入岗位"></el-input>
              <el-input v-model="item.age" class="inputDiv" placeholder="请输入工龄"></el-input>
<!--              <el-input v-model="item.gongxiao" class="inputDiv" placeholder="输入功效"></el-input>-->
              <el-select v-model="item.gongxiao"  style="width:120px;margin-left: 10px">
                <el-option label="优" value="优"></el-option>
                <el-option label="良" value="良"></el-option>
                <el-option label="差" value="差"></el-option>
              </el-select>
              <i
                  @click="delWorker(index)"
                  class="ml10"
                  style="cursor: pointer; color: #409EFF;
}"
              >删除</i
              >
            </div>
            <el-button type="text" @click="addWorker">+新增一条</el-button>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
       <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {baseRequest, workmanshipRequest} from "@/utils/http/request";

export default {
  data() {
    return {
      myChart: null,
      dataList: [],
      dialogVisible: false,
      form: {
        title: '',
        attendance: 0,
        s_title: '出勤率',
        datalist: []
      },
      loading: false,
      loadingMessage: '',
      editFrom: {},
    }
  },
  props: ["isShowSet"],
  watch: {
    isShowSet() {
      setTimeout(() => {
        if (this.myChart) {
          this.drawLine()
          this.myChart.resize()
        }
      }, 200)
    },
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    submit(val) {
      let isNotOK = this.editFrom.datalist.some(item => {
        if (!item.picURL || !item.name || !item.position|| !item.age|| !item.gongxiao) {
          return true
        }
        return false
      })

      if (isNotOK) {
        this.$message.error('请填写完整信息')
        return
      }

      this.loading = true
      workmanshipRequest.setSupervisorTeamEdit({
        ...this.editFrom,
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("pie"));
      this.myChart.clear()
      // 绘制图表
      this.myChart.setOption({
        tooltip: {
          //提示框组件
          trigger: "item", //触发类型(饼状图片就是用这个)
          //  formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        grid: {
          left: "50",
          right: "10",
          top: "30",
          bottom: "10",
          containLabel: true,
        },
        color: ["#11abff", "#cbcbcb"], //手动设置每个图例的颜色
        series: [
          //系列列表
          {
            type: "pie", //类型 pie表示饼图
            center: ["40%", "50%"], //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: ["40%", "70%"], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: {
              //图形样式
              normal: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: false, //平常不显示
                },
                labelLine: {
                  //标签的视觉引导线样式
                  show: false, //平常不显示
                },
              },
            },
            data: [
              {value: this.form.attendance, name: "出勤率"},
              {value: 100 - this.form.attendance || 0, name: "未出勤率"},
            ],
          },
        ],
      });
    },
    delWorker(index) {
      this.editFrom.datalist.splice(index, 1);
    },
    addWorker() {
      this.editFrom.datalist.push({
        picURL: '',
        name: '',
        position: '',
        age: '',
        gongxiao: ''
      },)
    },
    getData() {
      this.loading = true
      workmanshipRequest.getSupervisorTeam().then(res => {
        if (res.code === "01") {
          this.form = {
            ...res,
          };
          this.dataList = [...this.form.datalist]
          this.drawLine();
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    uploadDetailImg(data) {
      const index = data.data['index']
      let formData = new FormData()
      formData.append('fileobject', data.file)
      this.loading = true
      this.loadingMessage = '正在上传图片'
      baseRequest.upload(formData).then(res => {
        if (res) {
          this.$set(this.editFrom.datalist[index], 'picURL', res)
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.loadingMessage = ''
        this.$refs['form'].validate()
      })
    },
    beforeImgUpload(file) {
      const isJPG = file.type.indexOf('image') > -1;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('请上传图片!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: 100%;
  font-size: 12px;

  .workmanship {
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_right.png) no-repeat;
      height: 29px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      text-align: right;
      padding-right: 8px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_right_btn.png) no-repeat;
          margin-right: 10px;
        }
      }
    }

    .workmanship_con {
      height: calc(100% - 29px);
      overflow-y: auto;

      .chartBox {
        height: 40%;
        margin-bottom: 3rem;

        .chartBox_l {
          float: left;
          width: 200px;
          height: 100%;
        }

        .chartBox_r {
          float: right;
          width: calc(100% - 250px);
          margin-left: 50px;
          height: 100%;
          font-weight: bold;
          padding-top: 32px;

          .p1 {
            font-size: 31px;
            color: #43ddff;

          }

          .p2 {
            font-size: 42px;
            color: #fff;
          }
        }
      }

      .synopsis {
        height: 50%;
        line-height: 36px;

        .synopsis_l {
          width: calc(100% - 245px);
          height: 100%;
          float: left;
          font-size: 21px;
          color: #42ddff;
        }

        .synopsis_r {
          height: 100%;
          width: 210px;
          float: right;
          margin-right: 30px;

          img {
            width: 210px;
            height: 150px;
            object-fit: cover;
          }
        }
      }
    }

    &.editBox {
      background: #384768;
      border: 1px solid #67b1ea;
      color: #6ef7ff;
      font-size: 20px;
      align-items: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      span {
        cursor: pointer;
      }
    }
  }
}


</style>

<style lang="scss" scoped>
@import "../../assets/style/base";


.team-dialog {
  .worker-list {
    display: flex;
    align-items: center;

    .inputDiv {
      width: 120px !important;
      margin-left: $spacing-base;
    }
  }

  .avatar-uploader {
    display: flex;
    align-items: center;

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }
  }


}
</style>
